/**
 *轻云蒜瓣已购产品短信面板
 */
 Ext.define("PRO.shop.view.shopbuy.shopBuyPhoneView",{
   	extend: 'Ext.panel.Panel',
   	border:0,
  	alias: 'widget.shop.shopbuyphoneview',
  	layout:'column',
  	columnWidth:1,
  	autoScroll:true,
  	initComponent: function(){
        var me=this;
        me.defaults = {columnWidth:1,border:0,bodyStyle : 'background-color:#FFFFFF;overflow:auto;',autoScroll:true};
        me.buttons = me.buildButton();//下面按钮
        me.buttonAlign = 'right';//按钮的位置
        me.items=[me.doLoadNorth(),me.doLoadCenter()];
        me.callParent(arguments);
  	},
  	doLoadNorth:function(){//上面的面板
  	    var me=this;
        me.store=Ext.create('Ext.data.Store', {
                fields : ['type','src','code','name','newnum','oldnum','signature'],
                data :me.datas
        });
        var tpl = new Ext.XTemplate(
                '<tpl for=".">',
                '<div style="overflow:hidden;background:#ECF0F5;border-radius:4px;">',
                    '<img style="line-height: 50px;float:left;margin: 15px 10px;" src="{src}"/>',
                    '<font style="float:left;line-height:50px;width:95%;">',
                        '<font style="font-size: 16px;color: #2F6BCF;margin-right: 20px;">{name}</font>',
                        '<font style="font-size: 14px;color: #6B6B6B;">当前状态 : 可用短信<font style="color: #2F6BCF;">{newnum}</font>条,累计使用{oldnum}条。</font>',
                        '<font style="float:right;color:#2F6BCF;font-size:16px;">查看使用记录</font>',
                    '</font>',
                '</div>',
                '</tpl>'
        );
        var panel={
            xtype:'dataview',
            tpl:tpl,
            store:me.store
        }
        return panel;
    },
    doLoadCenter:function(){//中部的面板
        var me=this;
        var tpl = new Ext.XTemplate(
                '<font style="font-size: 14px;background: #00A65A;margin-top: 14px;text-align: center;line-height: 18px!important;height: 40px;border-radius: 4px;padding: 12px 20px;color: #fff;">',
                    '<font style="font-size:20px;">¥416.00 &nbsp;&nbsp;</font>',
                    '<font>(约¥20/人/月, 为您节省1250元)</font>',
                '</font>'
        );
        var tplLeft = new Ext.XTemplate(
             '<div style="max-height:627px;">',
                '<div style="text-align: center;"><p style="font-size: 18px;margin-bottom: 15px;">短信自费表</p></div>',
                    '<table class="je-table" style="border-color: #F2F2F2;color:#515151;">',
                        '<thead>',
                            '<tr style="height:50px; background-color:#F9F9F9;">',
                              '<th scope="col" style="border-right:0px;border-color: #F2F2F2;">套餐</th>',
                              '<th scope="col" style="border-right:0px;border-left:0px;border-color: #F2F2F2;">项目</th>',
                              '<th scope="col" style="border-right:0px;border-left:0px;border-color: #F2F2F2;">赠送</th>',
                              '<th scope="col" style="border-right:0px;border-left:0px;border-color: #F2F2F2;">价格(约)</th>',
                              '<th scope="col" style="border-left:0px;border-color: #F2F2F2;">充值</th>',
                            '</tr>',
                          '</thead>',
                          '<tbody>',
                            '<tpl for=".">',
                                '<tr style="height:50px;background-color:{[xindex % 2 === 0 ? "#F9F9F9" : "#FFFFFF"]}">',
                                  '<td style="border-right:0px;border-color: #F2F2F2;">{project}</td>',
                                  '<td style="border-right:0px;border-left:0px;border-color: #F2F2F2;">{num}</td>',
                                  '<td style="border-right:0px;border-left:0px;border-color: #F2F2F2;">{give}</td>',
                                  '<td style="border-right:0px;border-left:0px;border-color: #F2F2F2;">{money}</td>',
                                  '<td style="border-left:0px;border-color: #F2F2F2;"><a style="color:#E91F63;cursor:pointer;">{recharge}</a></td>',
                                '</tr>',
                             '</tpl>',
                          '</tbody>',
                '</table>',
                '<div style="text-align: center;"><p style="font-size: 16px; line-height: 57px;color:#848484;">普通短信70字/条,超过70个字算长短信,按64个字/条计费,长短信最多支持300个字不拆分。</p></div>',
                '<div style="text-align: center;background-color: #FFFFFF;border: 1px solid #F2F2F2;border-radius: 4px;padding: 20px 0 30px 0px;">',
                    '<div style="text-align: center;"><p style="font-size: 14px; margin-bottom: 10px;font-size: 15px;color:#515151;">轻云蒜瓣短信彩信通道为正规行业通讯，禁止发送以下信息，如果发现立刻封号：</p></div>',
                    '<table style="width: 82%;text-align: left;margin: 0 auto;font-size: 15px;color:#515151;">',
                          '<tbody>',
                                '<tr style="height: 30px;">',
                                  '<td style="width: 25%;">1.中奖类信息</td>',
                                  '<td style="width: 25%;">2.骂人短信</td>',
                                  '<td style="width: 25%;">3.诽谤诈骗短信</td>',
                                  '<td style="width: 25%;">4.赌博违法短信</td>',
                                '</tr>',
                                '<tr style="height: 30px;">',
                                  '<td style="width: 25%;">5.彩票类短信</td>',
                                  '<td style="width: 25%;">6.诈骗短信</td>',
                                  '<td style="width: 25%;">7.聊天短信</td>',
                                  '<td style="width: 25%;">8.暧昧信息</td>',
                                '</tr>',
                                '<tr style="height: 30px;">',
                                  '<td style="width: 25%;">9.房产广告</td>',
                                  '<td style="width: 25%;">10.移动充值业务</td>',
                                  '<td style="width: 25%;">11.银行类业务</td>',
                                  '<td style="width: 25%;">12.考试作弊信</td>',
                                '</tr>',
                          '</tbody>',
                    '</table>',
                 '</div>',
             '</div>'
        );
        var store=Ext.create('Ext.data.Store', {
                fields : ['project','num','give','money','recharge'],
                data : [{
                        project : '100元套餐',//套餐项目
                        num:'1,250条',//实际到账
                        give:'-',//赠送
                        money:'0.080元/条',//价格
                        recharge:'立即充值'//充值
                    }, {
                        project : '300元套餐',//套餐项目
                        num:'4,600条',//实际到账
                        give:'300条',//赠送
                        money:'0.065元/条',//价格
                        recharge:'立即充值'//充值
                    }, {
                        project : '500元套餐',//套餐项目
                        num:'9,000条',//实际到账
                        give:'500条',//赠送
                        money:'0.055元/条',//价格
                        recharge:'立即充值'//充值
                    }, {
                        project : '1,000元套餐',//套餐项目
                        num:'20,000条',//实际到账
                        give:'2,000条',//赠送
                        money:'0.050元/条',//价格
                        recharge:'立即充值'//充值
                    }, {
                        project : '3000元套餐',//套餐项目
                        num:'65,000条',//实际到账
                        give:'6000条',//赠送
                        money:'0.046元/条',//价格
                        recharge:'立即充值'//充值
                    }, {
                        project : '10,000元套餐',//套餐项目
                        num:'243,000条',//实际到账
                        give:'20,000条',//赠送
                        money:'0.041元/条',//价格
                        recharge:'立即充值'//充值
                    }]
            });
        var tplRight = new Ext.XTemplate(
            '<div style="padding-left: 58px; max-height:627px;min-width:544px;">',
                '<div style="text-align: center;"><p style="font-size: 18px;margin-bottom: 15px;margin-right: 60px;">案例展示</p></div>',
                '<div style="background: #FFFFFF;border: 1px solid #F2F2F2;border-radius: 4px;text-align: left;width: 85%;padding: 20px;">',
                    '<div style="overflow: hidden;">',
                        '<img style="float:left;" src='+JE.buildCdnUrl("/pro/shop/resourse/u3426.png")+' />',
                        '<font style="font-size: 18px;float: left;margin-left: 5px;color:#2F6BCF;margin-bottom:9px;">说明</font>',
                    '</div>',
                    '<p style="font-size: 15px;padding: 8px 0px;color:#515151;">1.此短信用于以您公司的身份发给您指定客户的短信</p>',
                    '<p style="font-size: 15px;margin-bottom: 23px;color:#515151;">2.轻云蒜瓣发送给您的短信不计算费用</p>',
                    '<div style="overflow: hidden;">',
                        '<img style="float:left;" src='+JE.buildCdnUrl("/pro/shop/resourse/u3426.png")+' />',
                        '<font style="font-size: 18px;float: left;margin-left: 5px;color:#2F6BCF;">案例</font>',
                    '</div>',
                    '<p style="line-height: 25px;font-size: 14px;margin-top: 10px;background-color: #F9F9F9;padding: 14px;border-radius: 4px;color:#515151;">亲爱的张无忌，您的订单已签收。如果满意，请给我们5分好评，如果不满意申请退换产品，需要提交产品包装、产品外观、产品配件实物照片、确保全新齐全提交我们审核！期待你的全5分好评，评价嗮图，可向售后申请现金红包哦！【轻云蒜瓣】</p>',
                '</div>',
                '<div style="text-align: center;"><p style="font-size: 18px;line-height: 60px;margin-right: 60px;">修改签名</p></div>',
                '<div style="background: #FFFFFF;border: 1px solid #F2F2F2;border-radius: 4px;padding: 20px;width: 85%;">',
                    '<div style="overflow: hidden; margin-bottom: 8px;">',
                        '<img style="float:left;" src='+JE.buildCdnUrl("/pro/shop/resourse/u3426.png")+' />',
                        '<font style="font-size: 18px;float: left;margin-left: 5px;color:#2F6BCF;">说明</font>',
                    '</div>',
                    '<p style="font-size: 15px;padding: 8px 0px;color:#515151;">1.签名代表短信发送者的身份例如：【轻云蒜瓣】</p>',
                    '<p style="font-size: 15px;color:#515151;">2.签名格式【中文公司名称】或【中文网站名称】</p>',
                    '<form style="text-align: center;">',
                        '<div style="margin-top: 15px;">',
                            '<font style="font-size: 15px;color:#515151;">短信签名：</font>',
                            '<tpl for=".">',
                                '<input value="{signature}" type="text"/></br>',
                            '</tpl>',
                            '<input class="btn" style="margin-top: 15px;margin-top: 15px;width: 54%;height: 30px;background-color: #F9A646;border: 0;border-radius: 4px;color:#FFFFFF;" type="button" value="确认修改"/>',
                        '</div>',
                    '</form>',
                '</div>',
            '</div>'
        );
        var panel={
            itemId:'center',
            layout: {
                type: 'hbox',
                pack: 'start',
                align: 'stretch'
            },
            hidden:true,
            padding:20,
            minWidth:1024,
            style:'background-color:#F6F9FC;',
            xtype:'panel',
            bodyStyle:'background-color:#F6F9FC;width: 95%;',
            defaults:{
                style:'background-color:#F6F9FC;',
                border:0
            },
            items:[{
                    xtype:'dataview',
                    tpl:tplLeft,
                    store:store,
                    flex:2,
                    minWidth:648
                  },{
                    xtype:'dataview',
                    tpl:tplRight,
                    store:me.store,
                    flex:1,
                    minWidth:544,
                    style:'background-color:#F6F9FC;',
                    listeners:{
                        refresh:function(view,eOpts){
                            var btn = view.getEl().down('.btn');
                            btn.on('click',function(){
                                var text=view.getEl().down('input[type=text]').getValue();
                                JE.alert(text);
                            });
                        }
                    }
                  }]

        }
        return panel;
    },
    buildButton:function(){//底部的面板
        var me=this;
        var button={
            margin:'0 0 30 0',
            defaults:{
                // margin:"0 0 0 18px",
                 style:{
                     background:'#2F6BCF',
                     color:'#FFFFFF',
                     margin:'0 15px 0 0',
                     scale:'large',
                     width:100,
                     border:0
                 },
             },
            items:[{
                 xtype:'button',
                 text:'<i style="color:#FFFFFF;" class="fa fa-chevron-up">&nbsp;&nbsp;收起</i>',
                 height: 35,
                 hidden:true,
                 handler:function(){
                        me.getCmp('center').setVisible (false);
                        this.nextSibling().setVisible(true);
                        this.setVisible(false);
                 }
             },{
                xtype:'button',
                text:'<i style="color:#FFFFFF;" class="fa fa-chevron-down">&nbsp;&nbsp;续费</i>',
                height: 35,
                handler:function(){
                       me.getCmp('center').setVisible (true);
                       this.setVisible(false);
                       this.previousSibling().setVisible(true);
                }
             }]

        }
        return button;
    }
 });
